<template>
  <div class="home-swiper">
    <swiper class="swiper"
            :options="swiperOption">
      <swiper-slide>
        <div class="swiper-silde">
          <img src="~@/assets/imgs/index/banner@2x.jpg"
               alt=""
               v-show="lang === 'zh'">
          <img src="~@/assets/imgs/index/banner-en@2x.jpg"
               alt=""
               v-show="lang === 'en'">
        </div>
      </swiper-slide>
      <swiper-slide>
        <router-link to="/detail/6"
                     class="swiper-silde">
          <img src="~@/assets/imgs/index/banner2@2x.jpg"
               alt=""
               v-if="lang === 'zh'">
          <img src="~@/assets/imgs/index/banner2-en@2x.jpg"
               alt=""
               v-show="lang === 'en'">
        </router-link>
      </swiper-slide>
      <swiper-slide>
        <router-link to="/detail/5"
                     class="swiper-silde">
          <img src="~@/assets/imgs/index/banner3@2x.jpg"
               alt=""
               v-if="lang === 'zh'">
          <img src="~@/assets/imgs/index/banner3-en@2x.jpg"
               alt=""
               v-show="lang === 'en'">
        </router-link>
      </swiper-slide>
      <div class="swiper-pagination swiper-pagination-white"
           slot="pagination"></div>
      <div class="swiper-button-prev swiper-button-white"
           slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-white"
           slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

export default {
  name: 'swiper-example-fade-effect',
  title: 'Fade effect',
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      swiperOption: {
        loop: false,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
      lang: '',
    }
  },
  mounted() {
    this.lang = this.$i18n.locale === 'zh' ? 'zh' : 'en'
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    },
  },
  watch: {
    '$i18n.locale'(language) {
      console.log(language)
      this.lang = language
    },
  },
}
</script>

<style lang='scss'>
.home-swiper {
  background: #0e1b30;
  .swiper-silde {
    background: #0e1b30;
    img {
      display: block;
      height: 100%;
      width: 100%;
    }
  }
  .swiper-button-prev {
    left: 80px;
  }
  .swiper-button-next {
    right: 80px;
  }
  .swiper-button-prev,
  .swiper-button-next {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba($color: #fff, $alpha: 0.3);
  }
  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 12px;
    color: #fff;
  }
  .swiper-pagination-bullet {
    width: 4px;
    height: 4px;
    margin: 0 2px !important;
    border-radius: 5px;
    background: #fff;
    opacity: 1;
    transition: all 0.5s;
  }
  .swiper-pagination-bullet-active {
    width: 20px;
  }
}
</style>